<template>
  <div class="_wz_cent_main _wz_tryingStudy">
    <Card :bordered="true" style="margin:0 0 10px;">
      <p slot="title">隐患排查项</p>
      <div class="_wz_releaseDeptList_cent1">
        排查清单：<span>{{ selectDataParent.riskPointName }}</span>
        排查人员：<span>{{ selectDataParent.riskPointPerson }}</span>
        排查类型：<span>{{ selectDataParent.riskPointTypeName }}</span>
        排查周期：<span>{{
          selectDataParent.riskPointCycle == 0 ? "不限" : selectDataParent.riskPointCycle == 1 ? "每天" : selectDataParent.riskPointCycle == 2 ? "每周"
            : selectDataParent.riskPointCycle == 3 ? "每旬" : selectDataParent.riskPointCycle == 4 ? "每月" : "每季"
                   }}</span>
        运输企业：<span>{{ selectDataParent.deptName }}</span>
      </div>
    </Card>
    <Card :bordered="true" style="height: 100%;overflow: hidden;">
      <p slot="title">
        列表
      </p>
      <p slot="extra">
        <Button type="primary" @click="addTableData">添加</Button>
      </p>
      <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
    </Card>

    <Drawer width="40%" v-model="formOperation" class="_wz_car_viewData" :title="formTitle" :draggable="true" :mask-closable="false" :styles="formOperationStyles">
      <div v-if="formOperation">
        <Form label-position="right" :label-width="100" ref="formAdd" :model="selectData" :rules="ruleValidate">
          <FormItem label="排查序号" prop="riskItemCheckNo">
            <i-input v-model.number="selectData.riskItemCheckNo" placeholder="请填写风险排查序号" clearable />
          </FormItem>
          <FormItem label="排查项目" prop="riskItemCheckName">
            <i-input v-model="selectData.riskItemCheckName" placeholder="请填写排查项目" clearable />
          </FormItem>
          <FormItem label="风险等级" prop="riskItemGrade">
            <i-select v-model.number="selectData.riskItemGrade" filterable placeholder="请选择风险等级" clearable>
              <Option :value="1">低风险</Option>
              <Option :value="2">一般风险</Option>
              <Option :value="3">较大风险</Option>
              <Option :value="4">重大风险</Option>
            </i-select>
          </FormItem>
          <FormItem label="排查内容" prop="riskItemCheckContent">
            <i-input v-model="selectData.riskItemCheckContent" type="textarea" :rows="6" placeholder="请填写风险排查内容" clearable />
          </FormItem>
          <FormItem label="失控表现" prop="riskItemOutControl">
            <i-input v-model="selectData.riskItemOutControl" type="textarea" :rows="6" placeholder="请填写失控表现" clearable />
          </FormItem>
          <FormItem label="整改措施" prop="riskItemControl">
            <i-input v-model="selectData.riskItemControl" type="textarea" :rows="6" placeholder="请填写整改措施" clearable />
          </FormItem>
          <FormItem label="责任部门" prop="riskItemDerelictionDepartment">
            <i-input v-model="selectData.riskItemDerelictionDepartment" placeholder="请填写责任部门" clearable />
          </FormItem>
          <FormItem label="责任人员" prop="riskItemDerelictionPerson">
            <i-input v-model="selectData.riskItemDerelictionPerson" placeholder="请填写责任人员" clearable />
          </FormItem>
        </Form>
        <div class="demo-drawer-footer" v-if="formOperation">
          <Button style="margin-right: 8px" @click="formOperation = false">取消</Button>
          <Button type="primary" @click="authSubmit('formAdd')">提交</Button>
        </div>
      </div>
    </Drawer>

  </div>
</template>
<script>
import wzTbale from "../../../components/table/table";

export default {
  name: 'riskPointItem',
  props: ["selectDataParent"],
  components: {
    wzTbale,//列表
  },
  data: function () {
    return {
      ruleValidate: {
        riskItemCheckNo: [
          {type:'number',required: true, message: '请填写风险排查序号', trigger: 'blur'},
        ],
        riskItemCheckName: [
          {required: true, message: '请填写排查项目', trigger: 'blur'},
        ],
        riskItemGrade: [
          {type:'number',required: true, message: '请选择风险等级', trigger: 'blur'},
        ],
        // riskItemOutControl: [
        //   {required: true, message: '请填写失控表现', trigger: 'blur'},
        // ],
        // riskItemControl: [
        //   {required: true, message: '请填写整改措施', trigger: 'blur'},
        // ],
        riskItemDerelictionDepartment: [
          {required: true, message: '请填写责任部门', trigger: 'blur'},
        ],
        riskItemDerelictionPerson: [
          {required: true, message: '请填写责任人员', trigger: 'blur'},
        ],
        riskItemCheckContent: [
          {required: true, message: '请填写风险排查内容', trigger: 'blur'},
        ],
      },
      selectData: {},
      formTitle: "",
      formOperation: false,//表单左侧移出
      formOperationStyles: {//表单左侧移出css
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        padding: '10px',
        position: 'static'
      },
      tableData: {
        url: this.apiUrl.webApi + "/safety/risk/riskPointItemList",//请求地址
        method: 'post',//请求方式
        where: {pointUuid: this.selectDataParent.uuid},//搜索条件
        height: '100%',//表格高度 auto
        page: false,//分页是否使用
        width: 100,
        columns: [//表头数据
          {title: '序号', width: 70, key: 'riskItemCheckNo'},
          {title: '排查项目', minWidth: 120, key: 'riskItemCheckName'},
          {title: '排查内容', minWidth: 350, key: 'riskItemCheckContent'},
          {title: '责任人员', minWidth: 120, key: 'riskItemDerelictionPerson'},
          {title: '责任部门', minWidth: 120, key: 'riskItemDerelictionDepartment'},
          {
            title: '风险等级', key: 'riskItemGrade', width: 140, render: (h, params) => {
              //（1：低风险，2：一般风险，3：较大风险:，4：重大风险） riskItemGrade;
              var color = '', test = '';
              if (params.row.riskItemGrade == 1) {
                color = 'primary', test = '低风险';
              } else if (params.row.riskItemGrade == 2) {
                color = 'success', test = '一般风险';
              } else if (params.row.riskItemGrade == 3) {
                color = 'warning', test = '较大风险';
              } else {
                color = 'error', test = '重大风险';
              }
              return h('Tag', {
                props: {
                  type: 'dot',
                  color: color
                }
              }, test);
            }
          },
          {
            title: '操作', fixed: 'right', width: 120,
            render: (h, params) => {
              var operationButtons = [];

              operationButtons.push(
                h('span', {
                  style: {"color": "#2d8cf0", "cursor": "pointer"},
                  on: {
                    click: () => {
                      this.formTitle = "修改"
                      this.selectData = JSON.parse(JSON.stringify(params.row));
                      this.formOperation = true;
                    }
                  }
                }, "修改")
              )
              operationButtons.push(h('Divider', {props: {type: 'vertical',}}, ''))
              operationButtons.push(
                h('span', {
                  style: {"color": "#2d8cf0", "cursor": "pointer"},
                  on: {
                    click: () => {
                      let that = this;
                      that.$Modal.confirm({
                        title: '删除提醒',
                        content: '确定要删除选中的数据？',
                        onOk: () => {
                          that.axios.post(that.apiUrl.webApi + "/safety/risk/riskPointItemDelete", {uuid: params.row.uuid}).then(res => {
                            if (!!res) {
                              that.$Message.success('删除成功');
                              that.$refs.wzTbale.tableLoadData();
                            }
                          }).catch(err => {
                            console.log('失败', err);
                          })
                        },
                        onCancel: () => {
                        }
                      });
                    }
                  }
                }, "删除")
              )
              return operationButtons;
            }
          },
        ],
        format: {//返回数据格式
          list: ['data'],//数据list
        },
      }
    }
  },
  beforeCreate() {//beforeCreate创建前状态
  },
  created() {//created创建完毕状态
  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程
  },
  mounted() {//mounted 挂载结束状态
    var that = this;

  },
  methods: {//执行的方法
    //添加
    addTableData() {
      let that = this;
      that.formTitle = "添加";
      that.selectData = {}
      that.formOperation = true;
    },
    authSubmit(name) {
      var that = this;
      that.$refs[name].validate((valid) => {
        if (valid) {//正则判断使用
          that.selectData.riskPointId = that.selectDataParent.id;
          that.selectData.riskPointUuid = that.selectDataParent.uuid;
          that.axios.post(that.apiUrl.webApi + "/safety/risk/riskPointItemSaveOrUpdate", this.selectData).then(res => {
            that.$Spin.hide()
            if (!!res) {
              that.$refs.wzTbale.tableLoadData()
              that.$Message.success('保存成功')
              that.formOperation = false;
              that.selectData = {}
            }
          }).catch(err => {
            console.log("失败", err)
          })

        } else {
          this.$Message.error('请正确填写表单');
        }
      })

    },
  },
  watch: {//监听
  },
  beforeUpdate() {//beforeUpdate 更新前状态
  },
  updated() {//updated 更新完成状态
  },
  beforeDestroy() {//beforeDestroy 销毁前状态
  },
  destroyed() {//destroyed 销毁完成状态
  }
}
</script>


<style lang="less">
._wz_tryingStudy {
  //不固定头部  列表到底
  display: flex;
  flex-direction: column;
  height: 100%;

  .ivu-card-body {
    height: calc(100% - 51px);
  }

  ._wz_materialExamName {
    cursor: pointer;
    color: #2d8cf0;
  }

  ._wz_car_viewData {
    ._wz_car_viewData_img {
      width: 160px;
    }


    .ivu-select-input {
      height: 30px;
      padding: 0 8px 0 8px;
    }

    .ivu-select-disabled .ivu-select-selection .ivu-select-arrow {
      display: none;
    }
  }


  ._wz_releaseDeptList_cent1 {
    span {
      margin: 0 10px 0 0;
      color: #01AAED;
    }
  }
}

</style>


